//  rtk 是什么?
//  rtk 就会redux 的另一种编写方式, 类似于 vue和pinia 的关系,
//  将来redux 的未来的一个版本


// 使用rtk 创建store 的步骤:

// 第一步: 导出两个方法createSlice 和configureStore
import { createSlice, configureStore } from '@reduxjs/toolkit'

// 第二步: 定义一个切片,其实就是相当于 vuex 中的一个module,一个子模块
// 一个子模块中包含自己模块需要维护的数据和操作数据对应的方法 
const counterSlice = createSlice({
    name: 'counter', // 给切片命名: 相当于vuex中命名空间
    initialState: { // 定义该切片中的初始数据
        count: 0  // count变量为0 
    },
    reducers: { // 定义操作state 数据 的方法
        addCount: (state) => {
            // 该state 就是上面的initialState 对象
            state.count++
        },
        jianCount: (state, action) => {
            state.count -= action.payload
        }
    }
})

//第三步: 导出操作 该counterSlice切片中的数据的两个方法
export const { addCount, jianCount } = counterSlice.actions;

//第四步:  创建仓库
const store = configureStore({
    reducer: counterSlice.reducer
})

// 第五步: 导出仓库
export default store
